<template>
  <view :id="navId">
    <cm-page
      :cm-class="cmClass" :cm-style="cmStyle"
      :top="top" :bottom="bottom"
      :mode="mode" :has-title-bar="hasTitleBar">
      
      <template v-slot:top>
        <!-- 顶部横向导航 -->
        <scroll-view v-if="direction === 'horizontal'" class="cm-scroll-nav-horizontal" :class="[navClass]" :style="[navStyle]">
          <view class="cm-scroll-nav-horizontal-item" v-for="(item, index) in navData"
            :key="item.id" :id="'nav-' + item.id">
            {{ item.text }}
          </view>
        </scroll-view>
      </template>
      
      <!-- 左侧纵向导航 -->
      <scroll-view scroll-y scroll-with-animation
        v-if="direction === 'vertical'" class="cm-scroll-nav-vertical" :class="[navClass]" :style="[vNavStyle, navStyle]">
        <view class="cm-scroll-nav-vertical-item" v-for="(item, index) in navData"
          :key="item.id" :id="'nav-' + item.id"
          :class="[ curId === item.id ? 'active' : '' ]"
          @click="selectHandler(item, index)">
          {{ item.text }}
        </view>
      </scroll-view>
      
      <!-- 主体部分 -->
      <scroll-view scroll-y scroll-with-animation
        :scroll-into-view="curId"
        class="cm-scroll-nav-main" :style="[mainStyle]">
        <view class="cm-scroll-nav-main-item" :id="item.id" v-for="(item, index) in navData" :key="item.id">
          <!-- #ifdef H5 || APP-PLUS -->
          <view>sss</view>
          <slot v-bind:name="item.id"></slot>  
          <!-- #endif -->  
          <!-- #ifdef MP -->  
          <slot name="{{item.id}}"></slot>  
          <!-- #endif -->
        </view>
        <slot></slot>
      </scroll-view>
      
    </cm-page>    
  </view>

</template>

<script src="./cm-scroll-nav.js"></script>

<style lang="stylus">
@import './cm-scroll-nav.styl'
</style>
